<!--
/**
* Author: linchun
* Date: 2022-08-02 17:15
* Desc: CouponInfo 精选套劵
*/
-->
<template>
  <view class="coupon-info">
    <slot></slot>
    <!-- 介绍信息 -->
    <yy-cell class="custom-zm-cell" :ext-class="'coupon-info-cell'">
      <view slot="title" class="title flex-b-m">
        <view class="fw500"> 为您精选套券，下单更省钱 </view>
        <view
          class="more flex-s-m"
          @click.stop="handleMoreCoupon"
          v-if="showMore"
        >
          <text> 更多优惠 </text>
          <text> ({{ list.length || 0 }}) </text>
          <!-- 箭头图标 -->
          <u-icon class="icon" name="arrow-right" color="#A1A1A5"></u-icon>
        </view>
      </view>
      <view slot="label" class="label"
        >下单时每个座位用一张券，可与已有券叠加使用
      </view>
    </yy-cell>
    <!-- 套票列表 -->
    <view class="coupon-box">
      <view class="coupon-list" v-if="showList.length > 0 && !contentRest">
        <coupon-item
          v-for="(item, index) in showList"
          :key="index"
          :item="item"
          :has-border-top="index > 0"
          :is-checked="checked(item)"
          :choose-counpon-num="chooseCounponNum"
          :ticket-num="ticketNum"
          :able-package-coupon-len="ablePackageCouponLen"
          :discount-price="discountPrice"
          :has-commerce-price="hasCommercePrice"
          @check="checkPackage"
        />
      </view>
    </view>
  </view>
</template>

<script>
  import CouponItem from '../CouponItem'
  export default {
    name: 'CouponInfo',
    data() {
      return {}
    },
    components: { CouponItem },
    props: {
      list: {
        type: [Object, Array],
        default: () => {
          return []
        }
      },
      showMore: {
        type: Boolean,
        default: false
      },
      ablePackageCouponLen: [String, Number], // 套票可用张数
      isChecked: Boolean,
      contentRest: Boolean,
      hasCommercePrice: Boolean,
      chooseCounponNum: [String, Number], //
      checkPackageId: [String, Number],
      ticketNum: [String, Number],
      discountPrice: [String, Number]
    },
    mounted() {},
    onShow() {},
    computed: {
      showList() {
        return this.showMore ? this.list.slice(0, 5) : this.list
      }
    },
    methods: {
      checkPackage(item, curChooseNum) {
        this.$emit('clickCouponCheck', item, curChooseNum)
      },
      handleMoreCoupon() {
        this.$emit('toMoreTap')
      },
      checked(item) {
        return this.isChecked && item.commodityId == this.checkPackageId
      }
    }
  }
</script>
<style lang="scss">
  .coupon-info {
    background: #fff;
    padding: 37rpx 20rpx 1rpx 20rpx;
    //确认订单页zm-cell自定义
    .custom-zm-cell {
      .title {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 18rpx;
        .more {
          height: 30rpx;
          line-height: 30rpx;
          font-size: 26rpx;
          font-weight: 400;
          color: #adb5b7;
        }
      }
      .label {
        font-size: 24rpx;
      }
      .value {
        .txt {
          margin-right: 18rpx;
        }
      }
    }
    .coupon-box {
      min-height: 110rpx;
      height: auto;
    }
  }
</style>
